<template>
  <div>
    <div id="broadcasting">
      <!-- 导航图标 -->
      <div id="icon">
        <ul>
          <li class="icon_li" v-for="item in classifyData" :key="item.id">
            <a href="javascript:;" @click="getClassifyRecommend(item.id)">
              <div>
                <img :src="item.pic84x84IdUrl" alt>
              </div>
              <em>{{item.name}}</em>
            </a>
          </li>
        </ul>
      </div>
      <!-- 优秀新电台 -->
      <div id="nice">
        <el-card class="broad_card">
          <div slot="header" class="clearfix">
            <span>优秀新电台</span>
          </div>
          <ul class="recommend_ul" v-for="item in recommendData" :key="item.id">
            <li class="recommend_ul_li">
              <img
                :src="item.picUrl"
                alt
                @click="$router.push({name:'radiodetails',params:{data:item}})"
              >
              <p @click="$router.push({name:'radiodetails',params:{data:item}})">{{item.name}}</p>
              <span>{{item.rcmdtext}}</span>
            </li>
          </ul>
        </el-card>
      </div>
    </div>
  </div>
</template>


<script>
import { broadcastingClassify, classifyRecommend } from "@/api";
export default {
  data() {
    return {
      classifyData: [],
      recommendData: []
    };
  },
  created() {
    this.getBroadcastingClassify();
    this.getClassifyRecommend(2001); //页面加载先渲染一个推荐
  },
  methods: {
    //电台分类
    getBroadcastingClassify() {
      broadcastingClassify().then(res => {
        this.classifyData = res.data.categories;
        // console.log(this.classifyData);
      });
    },
    //电台分类推荐
    getClassifyRecommend(type) {
      classifyRecommend(type).then(res => {
        this.recommendData = res.data.djRadios;
        // console.log(this.recommendData);
      });
    }
  }
};
</script>


<style>
/* 导航图标 */
#broadcasting {
  width: 1200px;
  margin: 0 auto;
  padding: 40px;
}
.icon_li {
  width: 70px;
  height: 70px;
  float: left;
  margin: 10px 50px;
}
#icon li a div {
  margin-left: 11px;
}
#icon li a div img {
  width: 48px;
  height: 48px;
}
#icon li a em {
  font-style: normal;
  display: block;
  width: 70px;
  font-size: 12px;
  color: #888;
  text-align: center;
}
/* 优秀新电台 */
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.broad_card {
  width: 1200px;
}
.recommend_ul_li {
  float: left;
  width: 150px;
  height: 240px;
  margin-left: 42px;
  margin-right: 40px;
}
.recommend_ul_li img {
  width: 150px;
  cursor: pointer;
}
.recommend_ul_li p {
  font-size: 14px;
  line-height: 1;
  color: #333;
  margin: 13px 0 6px;
  cursor: pointer;
}
.recommend_ul_li p:hover {
  text-decoration: underline;
}
.recommend_ul_li span {
  font-size: 12px;
  color: #999;
  line-height: 1;
}
</style>
